<template>
  <div class="attendances">
    <div class="app-container">
      <PageTools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before>有0条考勤审批未处理</template>
      </PageTools>
      <!-- 部门多选框组 -->
      <el-card>
        <el-row>
          <h3>部门:</h3>
        </el-row>
        <el-row>
          <el-checkbox-group v-model="checkDepts" @change="deptsChange">
            <el-checkbox v-for="item in depts" :key="item" :label="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-row>
        <!-- 考勤状态多选框组 -->
        <el-row
          type="flex"
          justify="start"
          align=" center"
          style="margin-top: 30px"
        >
          <el-col :span="3">
            <h3>考勤状态:</h3>
          </el-col>
          <el-col>
            <el-row class="myCheckBox">
              <el-checkbox-group v-model="checkstate" @change="stateChange">
                <el-checkbox
                  v-for="item in attendanceEnum.holidayType"
                  :key="item.id"
                  :label="item.id"
                >{{ item.value }}</el-checkbox>
              </el-checkbox-group>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <!-- 表格 -->
      <el-card style="margin-top:12px">
        <el-table :data="pageData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="50px" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="workNumber" min-width="100px" label="工号" />
          <el-table-column prop="departmentName" min-width="120px" label="部门" />
          <el-table-column prop="mobile" min-width="120px" label="手机" />
          <el-table-column
            v-for="(item,index) in dateData"
            :key="index"
            :label="item"
            prop="attendanceRecord"
          >
            <template #default="{row}">{{ row.attendanceRecord[index].adtStatu | formatterAttendanceRecord }}</template>
            <!-- <el-table-column prop="attendanceRecord"> -->
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-col :span="5">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              @current-change="currentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
import attendanceEnum from '@/api/constant/attendance'
export default {
  filters: {
    formatterAttendanceRecord(val) {
      const obj = attendanceEnum.holidayType.find(item => Number(item.id) === val)
      return obj ? obj.value : ''
    }
  },
  data() {
    return {
      // 所有数据
      allData: [],
      // 所有部门
      depts: [],
      // 选中的部门
      checkDepts: [],
      // 考勤枚举数据
      attendanceEnum,
      // 选中的考勤状态
      checkstate: [],
      // 日期数据
      dateData: [],
      page: {
        pagesize: 10,
        currentPage: 1,
        total: 0
      },
      // 渲染的数据
      pageData: [],
      // 部门筛选数据
      filterList: [],
      // 考勤状态筛选数组
      stateFliterList: []
    }
  },
  async created() {
    // 获取所有数据
    await this.getAllData()
    // 单独获取部门数据
    await this.getDeptsList()
    // 获取当前页数据
    await this.getPageData()
    // 获取日期数据
    await this.getDateData()
  },
  methods: {
    // 考勤状态筛选
    stateChange() {
      console.log(this.checkstate)
      // 没选中的时候 为所有值
      if (this.checkstate.length === 0) {
        this.stateFliterList = this.filterList
      } else {
        this.stateFliterList = this.filterList.map(item => {
          return {
            ...item,
            // 改变attendanceRecord的adtStatu值
            attendanceRecord: item.attendanceRecord.map(item2 => {
              const obj = attendanceEnum.holidayType.find(item3 => Number(item3.id) === item2.adtStatu)
              // console.log(obj)
              // 如果和选中的数据相同的就显示 否则显示空
              if (this.checkstate.indexOf(obj.id) > -1) {
                return item2
              } else {
                return {
                  ...item2,
                  adtStatu: ''
                }
              }
            })
          }
        })
      }
      // 更改完数据 从新调用获取当前页的数据
      this.getPageData()
    },
    // 部门筛选
    deptsChange() {
      // 如果选中的部门数组为0 没选中任何
      if (this.checkDepts.length === 0) {
        // 就为全部数据
        this.filterList = this.allData
      } else {
        // 否则 就为过滤后的数据
        this.filterList = this.allData.filter(item => {
          return this.checkDepts.indexOf(item.departmentName) > -1
        })
      }
      // 页面数据总数 等于过滤完的数据总条数 用于分页组件他显示多少页的
      this.page.total = this.filterList.length
      // 考勤状态的数组等于当前的部门筛选完的数组
      this.stateFliterList = this.filterList
      // 更改完数据 从新调用获取当前页的数据
      this.getPageData()
      console.log(this.filterList)
      // 因为部门筛选完会赋值给考勤状态的数组 所以也要调用一下当前过滤考勤状态的方法
      this.stateChange()
    },
    // 换页
    currentChange(val) {
      console.log(val)
      this.page.currentPage = val
      this.getPageData()
    },
    // 获取当前页数据
    getPageData() {
      this.pageData = this.stateFliterList.slice((this.page.currentPage - 1) * 10, (10 * this.page.currentPage))
    },
    // 单独获取日期数据
    getDateData() {
      // 日期数据
      let dateData = this.allData[0].attendanceRecord
      dateData = dateData.map(item => {
        return item.day
      })
      // 改造日期数据 1号到31号
      this.dateData = dateData.map(item => {
        // return item.toString().slice(4, 2)
        return item.toString().slice(4, 6) + '/' + item.toString().slice(6, 8)
      })
      console.log(this.dateData)
    },
    // 获取所有数据
    async getAllData() {
      const res = await getAttendancesListMock()
      this.page.total = res.total
      this.allData = res.rows
      // 部门过滤数据 默认为全部数据
      this.filterList = this.allData
      // 考勤状态数据 默认为全部数据
      this.stateFliterList = this.allData
      console.log(this.allData)
    },
    // 部门数据
    getDeptsList() {
      const depts = []
      this.allData.forEach((item) => {
        if (depts.indexOf(item.departmentName) === -1) {
          depts.push(item.departmentName)
        }
      })
      // console.log(depts)
      this.depts = depts
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .myCheckBox {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}
</style>
